import React, { useState } from 'react';
import { Link } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { Button, Space, Popconfirm } from 'antd';
import ProCard from '@ant-design/pro-card';
import { useModel } from '@@/plugin-model/useModel';
import { getItems } from '@/services/aqchain-antd/item';

const ItemTable: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { currentAccount } = initialState!;
  const [tab, setTab] = useState<string>('tab1');

  const statusEnum = ['文件已上传', '确权成功', '出售中', '拍卖中', '授权中'];

  const categoryEnum = {
    1: '文字作品',
    2: '图片作品',
    3: '视频作品',
  };

  const columns: ProColumns<API.ModelsItem>[] = [
    {
      title: '序号',
      valueType: 'index',
    },
    {
      title: '作品名称',
      dataIndex: 'name',
    },
    {
      title: '作品类型',
      dataIndex: 'category',
      valueType: 'select',
      valueEnum: categoryEnum,
    },
    // {
    //   title: '文件上传时间',
    //   hideInSearch: true,
    //   dataIndex: 'createdAt',
    //   valueType: 'dateTime',
    // },
    // {
    //   title: '文件Hash',
    //   hideInSearch: true,
    //   dataIndex: 'fileHash',
    // },
    // {
    //   title: '区块链交易哈希',
    //   dataIndex: 'txHash',
    // },
    {
      title: '状态',
      hideInSearch: true,
      render: (node, record) => {
        if (record.owner?.address !== record.creator?.address) {
          return '已转出';
        }
        return statusEnum[record.status];
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (node, record: API.ModelsItem) => {
        return (
          <Space>
            <Link to={`/item/itemDetails/${record.fileHash}`}>详情</Link>
            <Link to={`/market/item/${record.fileHash}`}>交易</Link>
          </Space>
        );
      },
    },
  ];

  // const tradeColumns = [
  //   {
  //     title: '',
  //     valueType: 'index',
  //   },
  //   {
  //     title: '作品名称',
  //     render: (_, record) => {
  //       return record.item.name;
  //     },
  //   },
  //   {
  //     title: '出售方',
  //     hideInSearch: true,
  //     render: (_, record) => {
  //       return record.from.username;
  //     },
  //   },
  //   {
  //     title: '价格',
  //     hideInSearch: true,
  //     dataIndex: 'price',
  //     valueType: 'money',
  //   },
  //   {
  //     title: '购买时间',
  //     hideInSearch: true,
  //     render: (_, record) => {
  //       return moment.unix(record.blockTime).format('YYYY-MM-DD HH:mm:ss');
  //     },
  //   },
  //   {
  //     title: '交易编号',
  //     hideInSearch: true,
  //     dataIndex: 'txHash',
  //   },
  // ];
  //
  // const authColumns = [
  //   {
  //     title: '',
  //     valueType: 'index',
  //   },
  //   {
  //     title: '作品名称',
  //     render: (_, record) => {
  //       return record.item.name;
  //     },
  //   },
  //   {
  //     title: '授权方',
  //     hideInSearch: true,
  //     render: (_, record) => {
  //       return record.from.username;
  //     },
  //   },
  //   {
  //     title: '价格',
  //     hideInSearch: true,
  //     dataIndex: 'price',
  //     valueType: 'money',
  //   },
  //   {
  //     title: '授权时间',
  //     hideInSearch: true,
  //     render: (_, record) => {
  //       return moment.unix(record.blockTime).format('YYYY-MM-DD HH:mm:ss');
  //     },
  //   },
  //   {
  //     title: '交易编号',
  //     hideInSearch: true,
  //     dataIndex: 'txHash',
  //   },
  // ];

  return (
    <PageContainer>
      <ProCard
        tabs={{
          tabPosition: 'top',
          activeKey: tab,
          onChange: (key) => {
            setTab(key);
          },
        }}
      >
        <ProCard.TabPane key="tab1" tab="我的作品">
          <ProTable
            rowKey="fileHash"
            columns={columns}
            params={{
              creatorAddress: currentAccount?.address,
              ownerAddress: currentAccount?.address,
            }}
            request={(params) => getItems(params)}
            options={false}
          />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab2" tab="已转出作品">
          <ProTable
            rowKey="fileHash"
            columns={columns}
            params={{ creatorAddress: currentAccount?.address }}
            postData={(values) => {
              return values.filter((val) => {
                return val.creator.address !== val.owner.address;
              });
            }}
            request={(params) => getItems(params)}
            options={false}
          />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab3" tab="购买的版权">
          <ProTable
            rowKey="id"
            columns={columns}
            params={{ ownerAddress: currentAccount?.address }}
            postData={(values) => {
              return values.filter((val) => {
                return val.creator.address !== val.owner.address;
              });
            }}
            request={(params) => getItems(params)}
            options={false}
          />
        </ProCard.TabPane>
        {/*<ProCard.TabPane key="tab4" tab="购买的授权">*/}
        {/*  <ProTable*/}
        {/*    rowKey="id"*/}
        {/*    columns={authColumns}*/}
        {/*    params={{ userID: currentAccount?.id}}*/}
        {/*    request={(params, sorter, filter) => {}}*/}
        {/*    options={false}*/}
        {/*  />*/}
        {/*</ProCard.TabPane>*/}
      </ProCard>
    </PageContainer>
  );
};

export default ItemTable;
